<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css" />

<script src='https://www.google.com/jsapi'></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script src="/js/icons.js"></script>

<script>
function drawMap(){
		var geocoder, mapOptions;
		var map, pointarray, heatmap;
	    var categories = [] ;			
	
	    console.log ("val0 " + jQuery('#val0').is(':checked'));	   	    
	    console.log("priority selected is " + jQuery('#priority').val());
	
		var lat = 38.3869906;
		var lng = 27.1597811;
		latlng = new google.maps.LatLng(lat, lng);
		pointarray = [];
		userData = [];

		mapOptions = {
		  zoom : 13,
		  center : latlng,
	      mapTypeId : google.maps.MapTypeId.SATELLITE
		};		
 								
		 map = new google.maps.Map(document.getElementById('map-canvas'),
					mapOptions);	

		  var reportDataURL = //"https://code.google.com/p/athena-json/source/browse/trunk/izmir-earthquake-scenario-reports.json";   
			// "/json/userData.json";	
			// "/json/userDataSingleTest.json"	
			//"/json/izmir-earthquake-scenario-reports.json";
			"/getReportData.groovy"
			
		  jQuery.getJSON(reportDataURL,						
		    function(data) {
    
			  jQuery.each(data, function(key, val) {

				  console.log("in each");

				 if (jQuery('#val1').is(':checked') && val.validationStatus!=1 )
					 return true;
				 if (jQuery('#val0').is(':checked') && val.validationStatus!=0 )
					 return true;
				 if (jQuery('#val-1').is(':checked') && val.validationStatus!=-1 )
					 return true;
				 
				 if (jQuery('#read').is(':checked') && Boolean(!val.reportRead))
					 return true;
				 
				 if ( jQuery('#priority').val()=="p1"  && ! (val.priorityLevel==1) )
                      return true;
				 if ( jQuery('#priority').val()=="p12"  && ! (val.priorityLevel==1 || val.priorityLevel==2) )
                     return true;						 					
											
		console.log("lat is " + val.lat + " lat 2 " + val.lat2);
				var reportLatlng = new google.maps.LatLng(val.lat, val.lng);    //val.reportLocation);
									//	val.reportLocation.lat,
									  //  val.reportLocation.lng);      

	   // console.log("latlng " +val.)	    
			    var pinIcon;
                switch(val.reportCategoryID){
                case 1:
                	 pinIcon= natural_disaster_red_pin;
                    break;
                case 2: 
                    pinIcon= fire_red_pin;
                    break;
                case 7: 
                    pinIcon= infrastructure_red_pin;
                    break;
                case 9: 
                    pinIcon= transport_red_pin;
                    break;                
                case 10: 
                    pinIcon= medical_red_pin;
                    break;         
                               
                 default:
                     pinIcon=red_pin;
                }

				var hrefLink, imageTag, imageLink;
				if (Boolean(val.reportImageLink)) {
					hrefLink= '<a href= "' + val.reportImageLink.value + '" target="_blank">  link to image</a>'
					imageTag= 	'<img src="' + val.reportImageLink.value + '" alt="image in infowindow" height="52" width="52"    >';
					imageLink = '<a href= "' + val.reportImageLink.value +'" target="_blank"> ' + imageTag + '</a>';
				}
				else {
					imageLink = "";
					hrefLink = "no image available"
					imageTag = "";
				};

				//var datePosted = new Date(Date.parse(val.reportTimestamp, "Y-m-d") );         
			
			
		    	var infoString = "<table>" +
                "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
                "<tr><td>Type:</td> <td><select id='type'>" +
                "<option value='bar' SELECTED>bar</option>" +
                "<option value='restaurant'>restaurant</option>" +
                "</select> </td></tr>" +
                "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"
		      //     console.log("info wind " + infoString);                             
					
			    var infowindow = new google.maps.InfoWindow(
													{content : infoString});
				var titleString = 'Report Category:' + val.reportCategory;
				var marker2 = new google.maps.Marker({
			   		    					position : reportLatlng,
				     						map : map,
										    icon : pinIcon,
											title : titleString
											});
				
				google.maps.event.addListener(marker2, 'click',
							function() {
							           infowindow.open(map, marker2);
								   	});
						
				//}
				
				//});
			  });
			  
			}).fail(function(jqxhr, textStatus, error) {
						var err = textStatus + ", " + error;
						console.log("getJSON Request Failed in draw map: " + err);
			});
		};
  </script>

<style>
#map-canvas {
	width: 800px;
	height: 700px;
	clear: both;
}
 
 #priority, #valid, #read, .fl  {
 float:left;
 padding-left: 5px;
 padding-right:5px;
 }
 
 .levels {
 color:green;
 }
 
 h1{
 color:blue;

 }
body {
	font-family: arial; 
	font-size: 12px; 
}
</style>    

</head>
<title>Athena</title>
<link rel="shortcut icon" href="images/athena-favicon.ico">
<body>
<h1>  <img  src="images/athena.png" alt="athena logo" height="30" width="40" title="ATHENA project">
	Command and Control Centre Intelligence Dashboard (CCCID) </h1>

<label class="fl" for="priority">Priority level: </label><select  id="priority" title="select priority level of reports to display"> 
   <option value="p1" >High</option>
   <option value="p12">High + Med</option>
   <option value="p13" selected="selected" >All</option>
</select>

 <div id="valid">
    <input type="radio" id="val1" name="radio" ><label for="val1" title="Show only validated reports">Validated</label>
    <input type="radio" id="val0" name="radio" checked="checked"><label for="val0" title="Show only unvalidated reports">Unvalidated</label>
    <input type="radio" id="val-1" name="radio"><label for="val-1" title="Show only rejected reports">Rejected</label>
  </div>
 
<input type="checkbox" id="read"><label for="read" title="Select to see only reports that have benn read">Read</label> 

  <div id="map-canvas"></div>
  <footer>
  <details>
<summary>About ATHENA</summary>
The ATHENA project brings together major user communities with world leading experts in crisis management
and experts and technology developers of mobile and social media use and development..
</details>
</footer>
</body>
<script>drawMap()</script>

  <script> 
   jQuery( "#valid" ).buttonset();
  
   jQuery('#valid, #read, #priority, #vr').bind('change', function(){
	     drawMap();	
	});    
  </script>
</html>